<!-- 模块说明 -->

<template>
  <div>
    <Buttons :options="options" />
    <Tables 
      :columns="columns" 
      :data="data" 
      :pagination="{localPage:true}"
      @example="(_d) => (example.fun = _d)"
      @select="select"
      @select-all="select"
    />
  </div>
</template>

<script setup>
import Tables from '@/components/Tables/index.vue'
import { outputRule } from '@/components/Tables/tool.ts'
import { reactive } from 'vue'
const example = reactive({ fun: {} })
const data = []
const select = (v) => {
  console.log(v)
}
const options = [
  {
    text: '新增',
    type: 'primary',
    click: () => {
      example.fun._add((key) => {
        console.log(key)
      })
    }
  },
  {
    text: '删除',
    type: 'danger',
    click: () => {
      console.log('点击')
    }
  }
]
const   columns = [
  {
    type: 'selection',
    width: '60'
  },
  {
    title: '姓名',
    dataIndex: 'name',
    edit: 'input',
    rules: (row)=> {
      if (!row.name) {
        return outputRule('姓名不允许为空', true)
      }
      return outputRule()
    }
  },
  {
    title: '年龄',
    dataIndex: 'age',
    edit: 'input'
  },
  {
    title: '性别',
    dataIndex: 'sxe',
    edit: 'select',
    option: {
      type: 'option',
      data: [{ label: '男', value: '0' }, { label: '女', value: '1' }]
    }
  },
  {
    title: '出生日期',
    dataIndex: 'date',
    edit: 'date-picker'
  },

  {
    title: '状态',
    render: [
      {
        isName: 'span',
        text: (row) => {
          return row.status ? '正常' : '禁用'
        }
      }
    ]
  },
  {
    title: '操作',
    render: [//isName支持接收组件
      {
        isName: 'el-button',
        type: 'text',
        text: '修改',
        click(row) {
          console.log(row, 'row')
        }
      },
      {
        isName: 'el-button',
        type: 'success',
        text: '修改',
        click(row) {
          console.log(row, 'row')
        }
      }
    ]
  }
]
</script>
<style lang="scss" scoped>

</style>